
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="author" content="m.yijiedai.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://static.yijiedai.com/Mobile/js/Mobile/Plugins/jquery.2.1.min.js"></script>
    <title></title>
    <style>
        * { margin: 0;padding: 0;list-style: none;}
        a,a:hover { text-decoration: none;}
        .canvans { margin: 30px auto;width: 300px;height: auto;}
        #canvans {margin: 0 auto;}
        .canvans-list { max-width: 640px;height: auto;margin: 0 auto;width: 100%;}
        .canvans-list h1 { text-align: center;color: #fea100;font-size: 24px;margin-bottom: 30px;}
        .canvans-tips { width: 80%;color: #999999;font-size: 16px;line-height: 25px;margin: 0 auto;padding-bottom: 50px;}
        .canvans-btn { width: 90%;height: 50px;display: block;background: #FEA100;color: #fff;text-align: center;line-height: 50px;border-radius: 5px;margin: 0 auto;font-size: 18px;}
    </style>
</head>
<body style="background: #fff;">
<div id="page">
    <div class="canvans">
        <canvas id="canvans" width="300" height="150"></canvas>
    </div>
    <div class="canvans-list">
        <h1>恭喜您，提交成功</h1>
        <div class="canvans-tips">第三方支付平台正在处理充值订单，您将很快收到充值结果短信，请耐心等待。</div>
        <a class="canvans-btn" onclick="mian()">完成</a>
    </div>
</div>
<script>
    var c=document.getElementById("canvans");
    var ctx=c.getContext("2d");
    var s=0,x=180,y=45;
    ctx.lineWidth=1;
    ctx.strokeStyle = '#FEA100';

    var ss=setInterval(function(){
        ctx.beginPath();
        s=s+0.02;
        if (s>=3.75-1.9){
            ctx.moveTo(x,y);
            if (x>150 && y<85){
                x=x-1.5;
                y=y+2;
                ctx.lineTo(x,y);

            }
            else{
                ctx.moveTo(x,y);
                x--;
                y--;
                ctx.lineTo(x,y);
                if (x<=137 && y<=72){
                    clearInterval(ss)
                }
            }

            ctx.stroke();

            ctx.closePath();

        }else{
            ctx.clearRect(0,0,300,300);
            ctx.arc(150,75,43,Math.PI*1.9,Math.PI*(s+1.9),false);

            ctx.stroke();

        }

    },8);
</script>
</body>
<script type='text/javascript'>
    var _vds = _vds || [];
    window._vds = _vds;
    (function(){
        _vds.push(['setAccountId', 'addfd6db12adeea9']);
        (function() {
            var vds = document.createElement('script');
            vds.type='text/javascript';
            vds.async = true;
            vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(vds, s);
        })();
    })();



    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady', function() {
                callback(WebViewJavascriptBridge)
            }, false)
        }

    }

    setupWebViewJavascriptBridge(function (bridge) {
        bridge.init(function(message, responseCallback) {
            responseCallback(data);
        })

    });

    var mian = (function(){
        WebViewJavascriptBridge.callHandler('main',null, function (responseData) {});
        event.stopImmediatePropagation();
    })

</script>
</html>